<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fashion World Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
	Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //Custom Theme files -->
<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script> 
<script src="js/modernizr.custom.js"></script>
<!-- //js -->
<!-- start-smoth-scrolling-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>	
<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
			});
		});
</script>
<!--//end-smoth-scrolling-->
</head>
<body>
	<!--banner-->
	<div class="banner">					
		<div class="baner-text">
			<h1><a href="index.html">Family</a></h1>
			<h4>YOU AND ME</h4>
			<script src="js/responsiveslides.min.js"></script>
				<script>
				// You can also use "$(window).load(function() {"
					$(function () {
					// Slideshow 3
						$("#slider3").responsiveSlides({
						auto: true,
						pager:true,
						nav:false,
						speed: 500,
						namespace: "callbacks",
						before: function () {
						$('.events').append("<li>before event fired.</li>");
						},
						after: function () {
							$('.events').append("<li>after event fired.</li>");
						}
					});	
				});
			</script>
			<!--//End-slider-script -->
			<div  id="top" class="callbacks_container">
				<ul class="rslides" id="slider3">
					<li>					
						<h3>张华轩</h3>
						<p>" 老大就应该有老大范 "</p>
					</li>
					<li>					
						<h3>张华明</h3>
						<p>" 小弟应该听大哥的 "</p>
					</li>
					<li>					
						<h3>徐施诺</h3>
						<p>" 二哥，不就是关羽，要讲义气  "</p>
					</li>
					<li>					
						<h3>左一诺</h3>
						<p>" 小妹，长大后就是 3个抢一个的场面了  "</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!--//banner-->
	<!--navigation-->
	<div class="top-nav">
		<span class="menu">MENU</span>		
		<ul class="nav1 cl-effect-11">
			<li><a href="index.html" class="active" data-hover="home">home</a></li>
			<li><a href="about.html" data-hover="About">About</a></li>					
			<li><a href="gallery.html" data-hover="picture">picture</a></li>
			<!-- 
			<li><a href="blog.html" data-hover="Blog">Blog</a></li>
			--> 
			<li><a href="https://my.oschina.net/u/3215454" data-hover="Blog">Blog</a></li>
			<li><a href="typo.html" data-hover="Typo">Typo</a></li>
			<li><a href="contact.html" data-hover="Contact">Contact</a></li>
		</ul>				
		<!-- script-for-menu -->
		 <script>
		   $( "span.menu" ).click(function() {
			 $( "ul.nav1" ).slideToggle( 300, function() {
			 // Animation complete.
			  });
			 });
		</script>
		<!-- /script-for-menu -->
	</div>
	<!--//navigation-->
	<!--banner-bottom-->
	<div class="banner-bottom">
		<div class="container">
			<div class="banner-grids">
				<div class="col-md-7 banner-grids-info">					
					<a href="#">
						<img class="img-responsive" src="images/img1.jpg" alt="">
						<div class="captn">
							<span>张 华 轩</span>
						</div>
					</a>
				</div>
				<div class="col-md-5 banner-grids-info">
					<a href="#">
						<img class="img-responsive" src="images/img2.jpg" alt="">
						<div class="captn">
							<span>徐 施 诺</span>
						</div>
					</a>	
					<a href="#">
						<img class="img-responsive" src="images/img3.jpg" alt="">
						<div class="captn">
							<span>张 华 明</span>
						</div>
					</a>
				</div>							
				<div class="clearfix"></div>
			</div>
		</div>
	</div>


	<div class="popular">
		<div class="container">
			<h3>赳赳老秦，共赴国难</h3>
			<h4>人类的全部历史都告诫有智慧的人，不要笃信时运，而应坚信思想。 —— 爱献生</h4>
			<div class="popular-grids">
				<div class="col-md-4 popular-info">	
					<p>较高级复杂的劳动，是这样一种劳动力的表现，这种劳动力比较普通的劳动力需要较高的教育费用，它的生产需要花费较多的劳动时间。因此，具有较高的价值。 —— 马克思</p>
				</div>
				<div class="col-md-4 popular-info">	
					<p>父亲子女兄弟姊妹等称谓，并不是简单的荣誉称号，而是一种负有完全确定的异常郑重的相互义务的称呼，这些义务的总和便构成这些民族的社会制度的实质部分。 —— 恩格斯</p>
				</div>
				<div class="col-md-4 popular-info">	
					<p>人生的磨难是很多的，所以我们不可对于每一件轻微的伤害都过于敏感。在生活磨难面前，精神上的坚强和无动于衷是我们抵抗罪恶和人生意外的最好武器。 —— 洛克</p>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--//popular-->
	<!--slid-->
	<div class="slid">
		<div class="container">
			<h2>滚滚长江东逝水，浪花淘尽英雄。</br>
				是非成败转头空。</br>
				青山依旧在，几度夕阳红。</br>
				白发渔樵江渚上，惯看秋月春风。</br>
				一壶浊酒喜相逢。</h2>
		</div>
	</div>
	<!--//slid-->
	<!--news-->
	<div class="news">
		<div class="container">
			<div class="col-md-4 news-grids">	
				<h3>java</h3>
				<h4>java,jstl,js,ognl,mysql,oracle,PostgreSql,webservice</h4>
				<p>spring,springMVC,Mybatis,hibernate,html5,css3,ibatis,ejb</p>
			</div>
			<div class="col-md-4 news-grids">
				<h3>son</h3>
				<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="headingOne">
							<h4 class="panel-title">
								<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
									张华轩
								</a>
							</h4>
						</div>
						<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
							<div class="panel-body">
								老大
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="headingTwo">
							<h4 class="panel-title">
								<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
									徐施诺
								</a>
							</h4>
						</div>
						<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
							<div class="panel-body">
								老二
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="headingThree">
							<h4 class="panel-title">
								<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
								张华明
								</a>
							</h4>
						</div>
						<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
							<div class="panel-body">
								老小
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4 news-grids">
				<h3>更多关于</h3>
				<ul>
					<li><a href="www.baidu.com">张华轩</a></li>
					<li><a href="www.baidu.com">徐施诺</a></li>
					<li><a href="www.baidu.com">张华明</a></li>
					<li><a href="http://empfrancis.oschina.io/onepiece" target ="_blank">海贼王</a></li>
					<li><a href="www.baidu.com">火影忍者</a></li>
					<li><a href="www.baidu.com">死神</a></li>
				</ul>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!--//news-->
	<!--testimonial-->
	<div class="testi">		
		<div class="container">
			<h3>名人总结</h3>
			<div class="testi-info">
				<div class="col-md-4 testi-grids">
					<span>1</span>
					<p>出来混是要还的 </p>
					<p>我不做大哥好多年 </p>
					<h5>张华轩 </h5>
				</div>
				<div class="col-md-4 testi-grids">
					<span>2</span>
					<p>大哥去哪，我就去哪 </p>
					<p>YOU JUMP I JUMP</p>
					<h5>徐施诺 </h5>
				</div>
				<div class="col-md-4 testi-grids">
					<span>3</span>
					<p>大哥，二哥带我玩 </p>
					<p>不带玩 就打你们啊 </p>
					<h5>张华明</h5>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--//testimonial-->
	<!--footer-->
	
	<!--//footer-->
	<script type="text/javascript">
			$(document).ready(function() {
				/*
				var defaults = {
					containerID: 'toTop', // fading element id
					containerHoverID: 'toTopHover', // fading element hover id
					scrollSpeed: 1200,
					easingType: 'linear' 
				};
				*/
				
				$().UItoTop({ easingType: 'easeOutQuart' });
				
			});
		</script>
		<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	<!--//smooth-scrolling-of-move-up-->
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.js"> </script>
</body>
</html>